/******************** 变量 ********************/
$tree-icon-color: $icon-color;

/******************** mixin ********************/

/******************** 组件 ********************/
.lv-tree {
  display: inline-block;
  width: 100%;
  font-size: $font-size-base;
  line-height: $line-height-base;
  font-family: $font-family;
  color: $text-color;

  .lv-treenode {
    display: flex;
  }
}

.lv-treenode-main {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  overflow: hidden;

  .lv-treenode-checkbox {
    display: flex;
    margin-left: $margin-sm;
  }

  .lv-icon-loading {
    @include icon-size;
  }
}

.lv-treenode-expanded-placeholder {
  width: 0.16rem;
  height: 0.16rem;
  visibility: hidden;
}

.lv-treenode-toggle-expanded,
.lv-treenode-toggle-content,
.lv-treenode-expanded-placeholder {
  flex-shrink: 0;
  color: $tree-icon-color;
}
.lv-treenode-toggle-content {
  margin-right: $margin-xs;
}
.lv-treenode-toggle-expanded,
.lv-treenode-toggle-content {
  cursor: pointer;
}

.lv-treenode-container {
  position: relative;
  width: 100%;
}

.lv-tree-virtual-scroll {
  @include component-scroll-lg;
}

.lv-treenode-wrap {
  display: flex;
}

// selected
.lv-treenode:not(.disabled) {
  > .lv-treenode-container > .lv-treenode-wrap .lv-treenode-content:hover {
    background: $item-background-hover;
  }
}

.lv-treenode.lv-treenode-selected:not(.lv-treenode-checkbox) {
  > .lv-treenode-container > .lv-treenode-wrap .lv-treenode-content {
    background: $item-background-selected;
    &.disabled {
      background: rgba($item-background-hover, 0.5);
      .lv-treenode-content-label {
        color: $text-color-disabled;
      }
    }

    .lv-treenode-content-label {
      color: $primary-color;
    }
  }
}

// disabled
.lv-treenode-content {
  &.disabled > .lv-treenode-content-label {
    color: $text-color-disabled;
    cursor: not-allowed;
  }
}

.lv-treenode-content {
  display: flex;
  align-items: center;
  height: $height-base;
  padding: 0 $padding-xs;
  margin: 0 0 0 $margin-xs;
  border-radius: $border-radius-md;
  overflow: hidden;
  &.lv-treenode-blocknode {
    flex: 1;
  }
  .lv-treenode-content-label {
    flex: 1;
    padding: 0.05rem 0;
    font-size: $font-size-base;
    line-height: $line-height-base;
    color: $text-color;
    overflow: hidden;
    cursor: pointer;
    > .lv-input {
      width: 100%;
    }
  }
}

.lv-treenode-children {
  // padding-left: 0.24rem;
  overflow: hidden;
}

// line
.lv-treenode-line.lv-treenode-expanded {
  & > .lv-treenode-container {
    & > .lv-treenode-parent-line {
      display: block;
      position: absolute;
      width: 0.01rem;
      background: $tree-border-color-split;
      left: 0.16rem;
      top: 0.36rem;
      bottom: 0.2rem;
    }
    & > .lv-treenode-children {
      .lv-treenode-children-line {
        position: absolute;
        height: 99.99rem;
        left: -0.08rem;
        bottom: 50%;
        border-left: $border-width-base $border-style-base $tree-border-color-split;
        &:before {
          content: ' ';
          width: 0.32rem;
          bottom: 0;
          left: 0;
          position: absolute;
          border-bottom: $border-width-base $border-style-base $tree-border-color-split;
        }
        &.lv-treenode-children-parent-line:before {
          width: 0.08rem;
        }
      }
    }
  }
}

// treeIndent
.lv-tree-indent {
  display: flex;

  .lv-tree-indent-item {
    position: relative;
    display: block;
    width: 0.24rem;
    height: 100%;
  }
}

.lv-treenode-line {
  .lv-tree-indent-item {
    &::before {
      content: '';
      display: block;
      position: absolute;
      height: calc(100% + 0.04rem);
      bottom: 0;
      left: 0.07rem;
      border-left: $border-width-base $border-style-base $tree-border-color-split;
    }
  }

  .lv-tree-indent-item {
    &.lv-tree-indent-half-line {
      &::before {
        height: 50%;
        top: 0;
        bottom: 50%;
      }
    }
  }

  .lv-tree-indent-item {
    &.lv-tree-indent-none-line {
      &::before {
        display: none;
      }
    }
  }

  .lv-tree-indent-item {
    &.lv-tree-indent-horizontal-line {
      &::after {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        left: 0.08rem;
        width: 0.16rem;
        border-bottom: $border-width-base $border-style-base $tree-border-color-split;
      }
      &.lv-tree-indent-expanded-placeholder {
        &::after {
          width: 0.32rem;
        }
      }
    }
  }
  .lv-tree-indent-expanded-placeholder {
    .lv-tree-indent-item.lv-tree-indent-horizontal-line {
      &::after {
        width: 0.32rem;
      }
    }
  }
}
